<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--表单元素标签 form action属性表单提交到服务器地址-->
    <form action="test.php">
        <!--表单元素-->
        <!--明文输入框-->
        用户:<input type="test">
        <!--暗文输入框-->
        密码:<input type="password"><br>
        <!--br 强制换行-->
        <!--单选按钮 想要单选按钮出现互斥效果 得加到同一个选项组-->
        性别:
        <!--input:redio*2-->
        男:<input type="radio" name="gender" value="male">
        女:<input type="radio" name="gender" value="female">
        <!--复选框-->
        爱好:
        游泳:<input type="checkbox" name="hobbies" value="swimming">
        购物:<input type="checkbox" name="hobbies" value="shopping">
        睡觉:<input type="checkbox" name="hobbies" value="sleeping">
        <!--hr分割线-->
        <hr>
        <!--下拉框-->
        <select name="city">
            <!--对下拉选项进行分组 shift+alt+f格式化文档-->
            <optgroup lable="现居城市">
                <option value="linfen">临汾</option>
                <option value="jinzhong">晋中</option>
                <option value="taiyuan">太原</option>
            </optgroup>
            <optgroup lable="想去城市">
                <option value="hengdian">横店</option>
                <option value="beijing">北京</option>
                <option value="xinjiang">新疆</option>
            </optgroup>
        </select>
        <!--多行文本框 cols表示100列 rows表示100行-->
        <textarea cols="30" rows="10"></textarea>
        <!--日期选择器-->
        <input type="date">
        <!--时间选择器-->
        <input type="time">
    </form>
</body>

</html>